<template>
  <div class="supplier-form">
    <h2>添加供应商管理</h2>

    <div class="form-section">
      <div class="form-group required">
        <label>供应商编码</label>
        <el-input v-model="form.supplierCode" placeholder="请输入供应商编码"></el-input>
      </div>

      <div class="form-group required">
        <label>供应商简称</label>
        <el-input v-model="form.supplierShortName" placeholder="请输入供应商简称"></el-input>
      </div>

      <div class="form-group required">
        <label>供应商名称</label>
        <el-input v-model="form.supplierName" placeholder="请输入供应商名称"></el-input>
      </div>

      <div class="form-group">
        <label>联系人</label>
        <el-input v-model="form.contactPerson" placeholder="请输入联系人"></el-input>
      </div>

      <div class="form-group">
        <label>邮箱</label>
        <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
      </div>

      <div class="form-group">
        <label>供应商电话</label>
        <el-input v-model="form.phone" placeholder="请输入供应商电话"></el-input>
      </div>

      <div class="form-group">
        <label>交易币种</label>
        <el-input v-model="form.currency" placeholder="请输入交易币种"></el-input>
      </div>

      <div class="form-group">
        <label>状态</label>
        <el-select v-model="form.status" placeholder="请选择状态">
          <el-option label="启用" value="active"></el-option>
          <el-option label="禁用" value="inactive"></el-option>
        </el-select>
      </div>
    </div>

    <div class="form-actions">
      <el-button type="primary" @click="saveForm">保存</el-button>
      <el-button @click="auditForm">审核</el-button>
      <el-button @click="submitForm">提交</el-button>
      <el-button @click="cancelForm">取消</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        supplierCode: '',
        supplierShortName: '',
        supplierName: '',
        contactPerson: '',
        email: '',
        phone: '',
        currency: '',
        status: ''
      }
    }
  },
  methods: {
      saveForm() {
        console.log('保存表单:', this.form);
        this.$message.success('保存成功');
      },
      auditForm() {
        console.log('审核表单:', this.form);
        this.$message.info('已提交审核');
      },
      submitForm() {
        console.log('提交表单:', this.form);
        this.$message.success('提交成功');
      },
      cancelForm() {
        this.$confirm('确定要取消吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.resetForm();
          this.$message.info('已取消');
        });
      },
    resetForm() {
      this.form = {
        supplierCode: '',
        supplierShortName: '',
        supplierName: '',
        contactPerson: '',
        email: '',
        phone: '',
        currency: '',
        status: ''
      };
    }
  }
}
</script>

<style scoped>
.supplier-form {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.form-section {
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group.required label::before {
  content: "*";
  color: #f56c6c;
  margin-right: 4px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
}

.form-actions {
  text-align: center;
  margin-top: 30px;
}

.el-button {
  margin: 0 10px;
}
</style>
